<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <!-- <staff-keyboard></staff-keyboard> -->
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/homePage">
          <ion-icon aria-hidden="true" class="icon-home" />
          <ion-label>刷题</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab2" href="/tabs/informationPepository">
          <ion-icon aria-hidden="true" class="icon-zcjx" />
          <ion-label>资讯库</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab3" href="/tabs/classRoom">
          <ion-icon aria-hidden="true" class="icon-zxpx" />
          <ion-label>云课堂</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="my" href="/tabs/myPage">
          <ion-icon aria-hidden="true" class="icon-my" />
          <ion-label>我的</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script setup lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
import { ellipse, square, triangle } from 'ionicons/icons';
import staffKeyboard from '@/components/staff-keyboard/staff-keyboard.vue';
</script>
<style scoped>
  .tab-selected{
    color: #CA3032 !important;
  }
  .tab-selected ion-icon:before{
    color: #CA3032 !important;
  }
</style>